﻿<section>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">@L("MyFriends")</h3>
        </div>
        <ul class="list-group friend-list-brief" data-bind="foreach: friendships">
            <a class="list-group-item" data-bind="attr: { href: '#user/' + friend.id() }">
                <img data-bind="attr: { src: friend.profileImage(), alt: friend.name() + ' ' + friend.surname() }" />
                <div class="user-info">
                    <span data-bind="html: friend.name() + ' ' + friend.surname()"></span>
                </div>
            </a>
        </ul>
        <!-- ko if: friendships().length <= 0 -->
        <div class="panel-body text-muted">
            <a class="abp-clickable text-muted" data-bind="click: showAddNewFriendDialog">+ No friend, add one?</a>
        </div>
        <!-- /ko -->
        <div class="panel-footer">
            <a href="#friends">@L("SeeAllFriends")</a>
        </div>
    </div>
</section>
